<template>
  <div class="top-bar">
    <div class="color-selector">
      <span class="label">我的颜色:</span>
      <div class="color-options">
        <div 
          v-for="color in colors" 
          :key="color.name"
          class="color-option"
          :class="{ 
            active: selectedColor === color.value,
            locked: color.locked 
          }"
          :style="{ backgroundColor: color.value }"
          :title="color.locked ? '颜色已锁定，无法切换' : '点击切换颜色'"
        >
          <!-- 锁定图标 -->
          <span v-if="color.locked" class="lock-icon">🔒</span>
        </div>
      </div>
      <span v-if="colors[0]?.locked" class="locked-text">颜色已锁定</span>
    </div>
    
    <div class="brush-control">
      <span class="label">笔刷:</span>
      <input 
        type="range" 
        min="5" 
        max="30" 
        :value="brushSize" 
        @input="$emit('update:brushSize', $event.target.value)"
        class="brush-slider"
      />
      <span class="brush-size">{{ brushSize }}px</span>
    </div>
    
    <div class="controls">
      <button class="btn btn-secondary" @click="$emit('showRoomInfo')">
        🏠 房间信息
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameTopBar',
  // 输入：调色板、当前颜色、笔刷大小
  props: {
    colors: { type: Array, required: true },
    selectedColor: { type: String, required: true },
    brushSize: { type: Number, required: true }
  },
  // 输出：笔刷更新、显示房间信息
  emits: ['update:brushSize', 'showRoomInfo']
}
</script>

<style scoped>
.top-bar { background: white; padding: 12px 20px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.color-selector { display: flex; align-items: center; gap: 10px; }
.label { font-weight: 500; color: #374151; }
.color-options { display: flex; gap: 8px; }
.color-option { 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  cursor: pointer; 
  border: 2px solid transparent; 
  transition: all 0.2s; 
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-option:hover { transform: scale(1.1); }
.color-option.active { border-color: #000; transform: scale(1.2); }
.color-option.locked { 
  cursor: not-allowed; 
  opacity: 0.8;
  border-color: #6B7280;
}
.color-option.locked:hover { transform: none; }
.lock-icon { 
  font-size: 10px; 
  color: #6B7280; 
  position: absolute;
  top: -2px;
  right: -2px;
}
.locked-text { 
  font-size: 12px; 
  color: #6B7280; 
  font-style: italic;
  margin-left: 5px;
}
.brush-control { display: flex; align-items: center; gap: 10px; }
.brush-slider { width: 100px; }
.brush-size { min-width: 40px; font-weight: 500; }
.controls { display: flex; gap: 10px; margin-left: auto; }
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
.btn-primary { background-color: #3B82F6; color: white; }
.btn-primary:hover { background-color: #2563EB; }
.btn-secondary { background-color: #F3F4F6; color: #374151; }
.btn-secondary:hover { background-color: #E5E7EB; }
</style> 